<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <style>
          #nav{
               width: 500px;
               border: 1px solid red;
               height: 100px;
               position: relative;
              overflow: hidden;
          }
          #menu{
              position: absolute;
              display:flex;
              height: 100px;
              align-items: center;
              left: 0;
              right: 0;
              transition: 1s;
          }
          #menu div{
              width: 40px;
              flex: 0 0 auto;
          }
          #menu div:nth-child(n+2){
              margin-left: 75px;
          }
      </style>
</head>
<body>
<div id="nav">
          <div id="menu">
                <div>测试1</div>
              <div>测试2</div>
              <div>测试3</div>
              <div onclick="test(1)">测试4</div>
              <div onclick="test(2)">测试5</div>
              <div>测试6</div>
              <div>测试7</div>

          </div>
</div>
<script>
           function test(index){
                  let num = index * (40 + 75);
                  let menu = document.getElementById('menu');
                  menu.style.left = 0 - num + 'px';
           }
</script>
</body>
</html>